<template>
    <div class="p-2">
        <transition>
            <div class="mb-[10px]">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :inline="true" label-width="100px">
                        <el-form-item label="租户名称" prop="tenantName">
                            <el-select placeholder="租户名称">
                                <el-option />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="工作空间" prop="status">
                            <el-input placeholder="请输入工作空间" clearable style="width: 260px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>
        <el-card shadow="hover">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleAdd"
                            v-hasPermi="['mapserver:workspace:add']">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                            v-hasPermi="['mapserver:workspace:edit']">修改</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                            v-hasPermi="['mapserver:workspace:remove']">
                            删除
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport"
                            v-hasPermi="['mapserver:workspace:export']">导出</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
            </template>

            <el-table v-loading="loading" :data="workspaceList" @selection-change="handleSelectionChange()">
                <el-table-column type="selection" width="54" align="center" />
                <el-table-column label="id" align="center" prop="id" v-if="false" />
                <el-table-column label="工作空间名称" align="center" prop="workspaceName" />
                <el-table-column label="工作空间别名" align="center" prop="workspaAlias" />
                <el-table-column label="所属租户" align="center" prop="tenantId" />
                <el-table-column label="工作空间描述" align="center" prop="workspaceDesc" />
                <el-table-column label="工作空间备注" align="center" prop="workspaceRemark" />

                <el-table-column label="状态" align="center" prop="status">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                            @change="handleStatusChange(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="操作" align="center" fixed="right"
                    class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:tenant:edit']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="同步套餐" placement="top">
                            <el-button link type="primary" icon="Refresh" @click="handleSyncTenantPackage(scope.row)"
                                v-hasPermi="['system:tenant:edit']">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                                v-hasPermi="['system:tenant:remove']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
    </div>
</template>
<script setup name="Workspace" lang="ts">

    import { WorkspaceForm, WorkspaceQuery, WorkspaceVO } from "@/api/mapserver/workspace/types";
    import { listWorkspace } from "@/api/mapserver/workspace";
    import { listTenant } from '@/api/system/tenant';
    import { TenantVO } from '@/api/system/tenant/types';

    const loading = ref(true);
    const showSearch = ref(true);
    const total = ref(0);
    const workspaceList = ref < WorkspaceVO > ([]);
    const tenantList = ref < TenantVO > ([]);

    const dialog = reactive < DialogOption > ({
        visible: false,
        title: ''
    })

    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const queryFormRef = ref < ElFormInstance > ();
    const initFormData: WorkspaceForm = {
        workspaceId: undefined,
        workspaceName: undefined,
        workspaceDesc: undefined,
        workspaceRemark: undefined,
        tenentId: undefined,
        status: "0",
    };

    const data = reactive <PageData<WorkspaceForm, WorkspaceQuery>> ({
        form: { ...initFormData },
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            workspaceName: '',
            tenentId: ''
        },
        rules: {
            workspaceName: [{ required: true, message: "工作空间不能为空", trigger: "blur" }],
            tenentId: [{ required: true, message: "租户信息不能为空", trigger: "blur" }]
        },
    });

    const { queryParams, form, rules } = toRefs(data);

    // /** 查询工作空间列表 */
    const getList = () => {
        loading.value = true;
        listWorkspace(proxy?.addDateRange(queryParams.value, dateRange.value)).then(res => {
            typeList.value = res.rows;
            total.value = res.total;
            loading.value = false;
        });
    }
     /**
      * 获取当前的租户信息 
      */
    const getTenantList = async() => {
        const res = await listTenant({ tenantId: '' });
        tenantList.value = res.rows;
    }
    const resetQuery=()=>{
        
    }
    const handleSelectionChange = () => { }

    const handleAdd = () => {
    }

    const handleExport = () => {

    }

    const handleUpdate = () => { }

    const handleDelete = () => { }
</script>
<style>

</style>